<template>
  <div>
        <van-grid>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>     
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(item,index) in list" :key="index">
        <img :src=" 'http://124.93.196.45:10001' +item.cover" alt />
        <br />电影名称:
        <strong>{{item.name}}</strong>
        <span>上映日期: {{item.playDate}}</span>
        <button class="btn">
          <router-link to="/lookMovie">立即观看</router-link>
        </button>
        电影简介 :
        <span v-html="item.introduction" class="spanL"></span>
      </van-cell>
    </van-list>

  </div>
</template>

<script>
import { timerL } from '@/service/movie'

export default {
  components: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    }
  },
  async created() {
    // const res = await Film()
    const res2 = await timerL()
    this.list = res2.data.rows
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求

      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.list.length >= 40) {
        this.finished = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
img {
  vertical-align: middle;
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 15px;
}
span {
  overflow: hidden;
  font-size: 14px;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2; //控制行数
  -webkit-box-orient: vertical;
}
strong {
  color: red;
}
.spanL {
  margin-top: 8px;
}
.btn {
  margin-right: 3px;
}
</style>